<template>
	<view class="app column">
		<!-- 顶部栏 -->
		<view class="content row">
			<scroll-view class="left-side" scroll-y>
				<view class="item center" :class="{active: item._id === current._id}" v-for="item in list"
					:key="item._id" @click="changeCate(item)">
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
			<view class="right-side">
				<!-- 热门美食 -->
				<view class="center title-wrap">
					<text>——</text>热门美食<text>——</text>
				</view>
				<!-- 搜索 -->
				<view class="search-wrap center">
					<text class="mix-icon icon-sousuo"></text>
					<text>输入关键字搜索</text>
				</view>
				<scroll-view class="scroll" scroll-y>
					<!-- <image class="cate-image" :src="current.image" mode="aspectFill"></image> -->
					<view class="wrap">
						<view class="item column" v-for="item in current.child" :key="item._id"
							@click="navToList(item)">
							<image class="icon" :src="item.image" mode="aspectFill"></image>
							<text class="tit">{{ item.name }}</text>
							<text class="desc">发布人:{{ item.author }}</text>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: {}
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				const res = [{
						_id: 1,
						name: '美味披萨',
						child: [{
								image: '../../static/images/img9.png',
								name: '黑椒牛肉披萨',
								author: '小编',
								_id: '1'
							},
							{
								image: "../../static/images/img10.png",
								name: '蔓越莓披萨',
								author: '小编',
								_id: '2'
							},
							{
								image: "../../static/images/img9.png",
								name: '黑椒牛肉披萨',
								author: '小编',
								_id: '3'
							},
							{
								image: "../../static/images/img10.png",
								name: '蔓越莓披萨',
								author: '小编',
								_id: '4'
							}
						]
					},
					{
						_id: 2,
						name: '意大利面',
						child: [{
								image: "../../static/images/img4.png",
								name: '黑椒牛肉意大利面',
								author: '小编',
								_id: '1'
							},
							{
								image: "../../static/images/img6.png",
								name: '番茄意大利面',
								author: '小编',
								_id: '2'
							},
							{
								image: "../../static/images/img4.png",
								name: '黑椒牛肉意大利面',
								author: '小编',
								_id: '3'
							},
							{
								image: "../../static/images/img6.png",
								name: '番茄意大利面',
								author: '小编',
								_id: '4'
							}
						]
					},
					{
						_id: 3,
						name: '饮品',
						child: [{
								image: "../../static/images/img7.png",
								name: '百香果奶茶',
								author: '小编',
								_id: '1'
							},
							{
								image: "../../static/images/img8.png",
								name: '草莓啵啵奶茶',
								author: '小编',
								_id: '2'
							},
							{
								image: "../../static/images/img7.png",
								name: '百香果奶茶',
								author: '小编',
								_id: '3'
							},
							{
								image: "../../static/images/img8.png",
								name: '草莓啵啵奶茶',
								author: '小编',
								_id: '4'
							}
						]
					}
				]
				this.current = res[0];
				this.list = res;
			},
			changeCate(item) {
				this.current = item;
			},
			navToList(item) {
				const arr = [];
				this.current.child.forEach(cate => {
					arr.push({
						_id: cate._id,
						name: cate.name
					})
				})
				// this.navTo(`/pages/product/list?cateId=${item._id}&firstCateId=${item.parent_id}`)
			}
		}
	}
</script>
<script setup>
	// import {
	// 	ref,
	// 	onMounted
	// } from 'vue'
	// const list = ref([]);
	// const current = reactive({});

	// function loadData() {
	// 	const res = [{
	// 			_id: 1,
	// 			name: '美味披萨',
	// 			child: [{
	// 					image: '../../static/images/img9.png',
	// 					name: '黑椒牛肉披萨',
	// 					author: '小编',
	// 					_id: '1'
	// 				},
	// 				{
	// 					image: "../../static/images/img10.png",
	// 					name: '蔓越莓披萨',
	// 					author: '小编',
	// 					_id: '2'
	// 				},
	// 				{
	// 					image: "../../static/images/img9.png",
	// 					name: '黑椒牛肉披萨',
	// 					author: '小编',
	// 					_id: '3'
	// 				},
	// 				{
	// 					image: "../../static/images/img10.png",
	// 					name: '蔓越莓披萨',
	// 					author: '小编',
	// 					_id: '4'
	// 				}
	// 			]
	// 		},
	// 		{
	// 			_id: 2,
	// 			name: '意大利面',
	// 			child: [{
	// 					image: "../../static/images/img4.png",
	// 					name: '黑椒牛肉意大利面',
	// 					author: '小编',
	// 					_id: '1'
	// 				},
	// 				{
	// 					image: "../../static/images/img6.png",
	// 					name: '番茄意大利面',
	// 					author: '小编',
	// 					_id: '2'
	// 				},
	// 				{
	// 					image: "../../static/images/img4.png",
	// 					name: '黑椒牛肉意大利面',
	// 					author: '小编',
	// 					_id: '3'
	// 				},
	// 				{
	// 					image: "../../static/images/img6.png",
	// 					name: '番茄意大利面',
	// 					author: '小编',
	// 					_id: '4'
	// 				}
	// 			]
	// 		},
	// 		{
	// 			_id: 3,
	// 			name: '饮品',
	// 			child: [{
	// 					image: "../../static/images/img7.png",
	// 					name: '百香果奶茶',
	// 					author: '小编',
	// 					_id: '1'
	// 				},
	// 				{
	// 					image: "../../static/images/img8.png",
	// 					name: '草莓啵啵奶茶',
	// 					author: '小编',
	// 					_id: '2'
	// 				},
	// 				{
	// 					image: "../../static/images/img7.png",
	// 					name: '百香果奶茶',
	// 					author: '小编',
	// 					_id: '3'
	// 				},
	// 				{
	// 					image: "../../static/images/img8.png",
	// 					name: '草莓啵啵奶茶',
	// 					author: '小编',
	// 					_id: '4'
	// 				}
	// 			]
	// 		}
	// 	]
	// 	current = res[0];
	// 	list = res;
	// },
	// loadData()
	// onMounted(() => {
	// })
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	// 标题
	.title-wrap {
		margin: 20rpx 0;
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333;

		text {
			color: #ccc;
			padding: 0 20rpx;
		}
	}

	// 搜索
	.search-wrap {
		width: 80%;
		margin: 0 auto;
		height: 60rpx;
		font-size: 22rpx;
		color: #999;
		border-radius: 100px;
		background-color: #f2f2f2;

		.icon-sousuo {
			margin-right: 6px;
			font-size: 30rpx;
			color: #999;
		}
	}

	.app {
		height: 100%;
	}

	.content {
		flex: 1;
		padding-top: 12rpx;
		overflow: hidden;
	}

	.left-side {
		flex-shrink: 0;
		width: 180rpx;
		height: 100%;
		overflow-y: hidden;
		background-color: #f2f2f2;

		.item {
			height: 90rpx;
			font-size: 26rpx;
			color: #555;
		}

		.active {
			font-size: 28rpx;
			color: $base-color;
			font-weight: 700;
			background-color: #fff;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 30rpx;
				width: 6rpx;
				height: 30rpx;
				background-color: $base-color;
				border-radius: 0 4rpx 4rpx 0;
			}
		}
	}

	.right-side {
		flex: 1;
		height: 100%;

		.scroll {
			height: calc(100% - 150rpx);
		}

		.cate-image {
			width: calc(100% - 40rpx);
			height: 200rpx;
			margin: 0 20rpx;
			border-radius: 8rpx;
		}

		.wrap {
			display: flex;
			flex-wrap: wrap;
			padding: 0 20rpx 20rpx;
		}

		.item {
			flex-shrink: 0;
			justify-content: flex-start;
			align-items: center;
			width: 50%;
			padding: 20rpx;
		}

		.icon {
			width: 100%;
			height: 180rpx;
			margin-bottom: 16rpx;
		}

		.tit {
			font-size: 24rpx;
			color: #333;
			text-align: center;
			line-height: 1.4;
		}

		.desc {
			font-size: 24rpx;
			color: #999;
			text-align: center;
			line-height: 1.4;
		}
	}
</style>
